<template>
  <div class="page">
    <div class="w clearfix">
      <div class="product-intro clearfix">
        <!-- 商品预览 -->
        <div class="preview-wrapper">
          <img-zoom class="preview-img" :src="productImg" :bigsrc="productImg" width="100%" heihgt="100%" :configs="imgZoomConfig"></img-zoom>
          <ul class="img-list row">
            <li class="col col-3" v-for="(item, index) in productImgList" :key="index" @click="setCurrentImg(index)">
              <img class="img-item" :class="{'active': activeIndex === index}" :src="item.imgUrl" width="105" height="105">
            </li>
          </ul>
        </div>
        <!-- 商品信息 -->
        <div class="item-info-wrapper">
          <div class="product-name"><span class="pro-grade-name" v-if="product.proGradeName">{{product.proGradeName}}</span>{{product.name}}</div>
          <!-- 价格 -->
          <div class="price-wrapper clearfix">
            <div class="price-tit">
              <div class="sell-price">批发价</div>
              <div class="original-price">零售价</div>
              <div class="since-pijia">起批量</div>
            </div>
            <div class="price-box" v-for="(item, index) in product.prices" :key="index">
              <div class="sell-price">
                <span class="cny">¥</span>{{item.sellPrice ? item.sellPrice : '?'}}</div>
              <div class="original-price">
                <span class="cny">¥</span>{{item.originalPrice ? item.originalPrice : '?'}}
              </div>
              <!-- 阶梯价 -->
              <div class="since-pijia" v-if="product.isLadder == 2">
                <span class="lower">{{item.amountLower}}</span>
                <span class="upper" v-if="item.amountUpper">-{{item.amountUpper}}</span>
                <span>{{item.attributeName}}</span>
                <span class="discount">{{item.discount ? item.discount : '?'}}折</span>
              </div>
              <!-- 非阶梯价 -->
              <div class="since-pijia" v-if="product.isLadder == 1">
                <span class="lower">{{item.amountLower}}</span>
                <span>{{item.attributeName}}</span>
                <span class="discount">{{item.discount ? item.discount : '?'}}折</span>
              </div>
            </div>
          </div>
          <!-- 促销 -->
          <div class="activity clearfix" v-if="product.activity">
            <span class="tit">促销</span>
            <div class="active-list">
              <router-link :to="'/activity?activeId=' + item.activityId" class="active-item" v-for="(item, index) in product.activity" :key="index">
                <span class="tag">{{FavourableActivityTypes.Types[item.type]}}</span>
                <span class="txt">{{item.activityName}}</span>
              </router-link>
            </div>
          </div>
          <!-- 运费 -->
          <div class="freight clearfix"  v-if="product.customerStore">
            <span class="tit">运费</span>
            <span class="origin-place">{{product.sendArea}}发货</span>
            <span>{{ShippingTypes.Types[product.customerStore.isPost]}}</span>
            <el-tooltip class="desc" effect="light"  placement="right" v-if="product.customerStore" v-show="product.customerStore.postDesc">
              <div slot="content">{{product.customerStore.postDesc}}</div>
              <el-button type="text">运费说明<i class="el-icon-question el-icon--right"></i></el-button>
            </el-tooltip>
          </div>
          <div class="package clearfix" v-if="product.param">
            <span class="tit">包装规格</span>
            <span class="desc">{{product.param}}</span>
          </div>
          <!-- 规格 -->
          <div class="specification-wrapper clearfix">
            <span class="tit">规格</span>
            <!-- 非阶梯价 -->
            <div class="specification-box" v-if="product.isLadder == 1">
              <div class="spec-item" v-for="(item, index) in product.prices" :key="index">
                <div class="spec-name">{{item.attributeName}}</div>
                <div class="spec-price">{{item.sellPrice}}</div>
                <div class="amount">
                  <span class="stock">{{product.stock}}{{item.attributeName}}可售</span>
                  <div class="counter-wrapper">
                    <v-counter :amount="item.amount" :lower="item.amountLower" :stock="product.stock" :obj="item" :zeroable="true" @amount-change="amountChange"></v-counter>
                  </div>
                </div>
              </div>
            </div>
            <!-- 阶梯价 -->
            <div class="specification-box" v-if="product.isLadder == 2">
              <div class="spec-item">
                <div class="spec-name">{{ladderPrice.attributeName}}</div>
                <div class="amount">
                  <span class="stock">{{product.stock}}{{ladderPrice.attributeName}}可售</span>
                  <div class="counter-wrapper">
                    <v-counter :amount="ladderPrice.amount" :lower="ladderPrice.amountLower" :obj="ladderPrice" :zeroable="true" :stock="product.stock" @amount-change="amountChange"></v-counter>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 合计 -->
          <div class="total-wrapper clearfix">
            合计：<span class="total-price">{{totalPrice}}</span>元
          </div>
          <!-- 购买 -->
          <div class="tools-wrapper clearfix">
            <button class="btn-buy" @click="buyNow">立即购买</button>
            <button class="btn-add2cart" @click="addCart">加入购物车</button>
            <div class="favorite">
              <span class="icon" :class="{'active': product.isProductStore == 1}" @click="likeProduct"></span><span>收藏</span>
            </div>
          </div>
          <!-- 服务 -->
          <div class="service-wrapper clearfix">
            <span class="tit">服务</span>
            <span class="seven">7天退换货</span>
            <span class="zheng">正品保证</span>
          </div>
        </div>
      </div>
      <!-- 领取样品 -->
      <div class="sample-wrapper clearfix" v-if="product.linkedSample">
        <div class="sample-box" v-if="product.linkedSample.isFree == 1">
          <span class="icon"><img src="../../assets/images/forfree.png"></span>
          <p class="text">（每个用户限领取一次，样品为品鉴装，样品免费，运费到付，确认后将按照您的默认地址发货，如需更改请至地址管理重设。）</p>
          <button class="btn-get" :class="{'disabled': product.linkedSample.isGet}" @click="getSample">领取</button>
        </div>
        <div class="sample-box" v-if="product.linkedSample.isFree == 0">
          <span class="icon"><img src="../../assets/images/forsell.png"></span>
          <p class="text">{{product.linkedSample.linkedProductName}}</p>
          <button class="btn-get" :class="{'disabled': product.linkedSample.isGet}" @click="getSample">前往购买</button>
        </div>
      </div>
      <!-- 店铺信息 -->
      <div class="store-wrapper">
        <div class="store-box" v-if="product.customerStore">
          <div class="logo">
            <img :src="product.customerStore.storeLogo" width="100%" height="100%">
          </div>
          <p class="name">{{product.customerStore.storeName}}</p>
          <router-link :to="'/store/storeInfo?storeId=' + product.customerStore.storeId" class="btn-link">进入店铺</router-link>
        </div>
        <!-- 推荐商品 -->
        <div class="store-selection">
          <h4 class="title"></h4>
          <swiper class="selection" :options="selectionOptions" ref="selection" v-if="this.selectionGoods.length">
            <swiper-slide v-for="(item, index) in selectionGoods" :key="index">
              <router-link :to="'/goods/goodsDetail?productId=' + item.productId" target="_blank" class="selection-item">
                <div class="img-wrapper">
                  <img class="img" :src="item.productCover">
                </div>
                <div class="price-wrapper">
                  <span class="discount">{{item.discount ? item.discount : '?'}}折</span>
                  <span class="price">
                    <em class="yuan">¥</em>
                    <span v-if="item.sellPrice">{{item.sellPrice | priceFormat1}}</span>
                    <span v-else>?</span>
                    <em class="sepc">/{{item.sellType}}</em></span>
                  <span class="original-price"><em class="yuan">¥</em>{{item.originalPrice | priceFormat1}}</span>
                </div>
                <div class="name">{{item.name}}</div>
                <div class="pro-grade-name" v-if="item.proGradeName">{{item.proGradeName}}</div>
                <div class="discounts" v-if="item.activityList">
                  <div class="tag-group" v-if="item.activityList.isMore === '1'">
                    <span class="tag" v-for="(tag, index1) in item.activityList.type" :key="index1">{{FavourableActivityTypes.Types[tag]}}</span>
                  </div>
                  <div class="tag-group" v-else>
                    <span class="tag">{{item.activityList.activityName}}</span>
                  </div>
                </div>
                <div class="keywords">
                  <span v-if="item.k1" class="w1">{{item.k1}}</span>
                  <span v-if="item.k2" class="w2"><i class="text">{{item.k2}}</i></span>
                  <span v-if="item.k3" class="w3">{{item.k3}}</span>
                </div>
              </router-link>
            </swiper-slide>
          </swiper>
          <div class="swiper-button-next next-btn"><i class="icon"></i></div>
        </div>
      </div>
      <!-- 商品详情 -->
      <div class="product-details">
        <div class="details-info">
          <p class="tit">商品详情</p>
          <div class="info-list row" v-if="product.productMultiAttributes">
            <div class="col col-4">品牌：{{product.brandName}}</div>
            <div class="col col-4" v-if="product.productCategoryAttributes[0]">产品品类：{{product.productCategoryAttributes[0].attributeValue}}</div>
            <div class="col col-4" v-if="product.productMultiAttributes.region">产区：{{product.productMultiAttributes.region}}</div>
            <div class="col col-4" v-if="product.productMultiAttributes.producingArea">产地：{{product.productMultiAttributes.producingAreaName}}</div>
            <div class="col col-4" v-if="product.productMultiAttributes.material">原料：{{product.productMultiAttributes.material}}</div>
            <div class="col col-4" v-if="product.productMultiAttributes.process">工艺：{{product.productMultiAttributes.process}}</div>
            <div class="col col-4" v-if="product.productMultiAttributes.netWeight">净含量（规格）：{{product.productMultiAttributes.netWeight}}</div>
            <div class="col col-4" v-if="product.productMultiAttributes.netWeightValue">净含量（规格）：{{product.productMultiAttributes.netWeightValue}}g/{{SpecificationTypes.Types[product.productMultiAttributes.netWeightKey]}}</div>
            <div class="col col-4" v-if="product.productMultiAttributes.level">等级：{{levelTypes.Types[product.productMultiAttributes.level]}}</div>
            <div class="col col-4" v-if="product.productMultiAttributes.shelfLife">保质期：{{product.productMultiAttributes.shelfLife}}个月</div>
            <div class="col col-4" v-if="product.productMultiAttributes.year">生产年份：{{product.productMultiAttributes.year}}年</div>
            <div class="col col-4" v-if="product.productMultiAttributes.harvestSeason">采摘季节：{{product.productMultiAttributes.harvestSeason}}</div>
            <div class="col col-4" v-if="product.productMultiAttributes.treeAge">茶树年龄：{{product.productMultiAttributes.treeAge}}年</div>
            <div class="col col-4" v-if="product.productMultiAttributes.organicCertification">有机认证：{{organicCertificationTypes.Types[product.productMultiAttributes.organicCertification]}}</div>
            <div class="col col-4" v-if="product.productMultiAttributes.storage">储存方式：{{product.productMultiAttributes.storage}}</div>
          </div>
        </div>
        <!-- 详情图 -->
        <div class="details-imgs">
          <img class="images" v-for="(item, index) in detailsImg" :key="index" :src="item">
        </div>
      </div>
    </div>
    <!-- 领样地址 -->
    <el-dialog
      title="请确认收货地址"
      :visible.sync="dialogSample"
      width="600px"
      top="38vh">
      <div class="sample-content">
        <p><span>所在地区</span>{{sampleData.sendArea}}</p>
        <p><span>收货人</span>{{sampleData.name}}</p>
        <p><span>详细地址</span>{{sampleData.address}}</p>
        <p><span>手机号</span>{{sampleData.mobile}}</p>
      </div>
      <span class="dialog-footer">
        <el-button type="primary" @click="sureSample">确 定</el-button>
      </span>
    </el-dialog>

    <vTools/>
  </div>
</template>

<script>
import imgZoom from 'vue2.0-zoom'
import vCounter from '@/components/public/counter'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getAreaName } from '@/util/getAreaName'
import { FavourableActivityTypes, ShippingTypes, SpecificationTypes, levelTypes, organicCertificationTypes } from '@/util/enums'
import vTools from '@/components/layout/tools'

export default {
  data () {
    return {
      productId: this.$route.query.productId || '', // 商品id
      product: {}, // 商品详情
      productImgList: [], // 商品主图
      activeIndex: 0, // 当前预览图片index
      productImg: '',
      detailsImg: [], // 商品详情图
      imgZoomConfig: {
        width: 540,
        height: 540,
        maskWidth: 180,
        maskHeight: 180,
        maskColor: '#44916C',
        maskOpacity: 0.1
      },
      ladderPrice: {}, // 阶梯价
      isLoading: false, // 是否正在执行事件
      FavourableActivityTypes: FavourableActivityTypes, // 优惠类型
      ShippingTypes: ShippingTypes, // 包邮类型
      SpecificationTypes: SpecificationTypes, // 规格类型
      levelTypes: levelTypes, // 等级类型
      organicCertificationTypes: organicCertificationTypes, // 有机认证类型
      totalPrice: 0,
      selectionGoods: [], // 为你推荐
      selectionOptions: { // 为你推荐swiper配置
        direction: 'vertical',
        height: 1940,
        slidesPerView: 5,
        slidesPerGroup: 5,
        loop: true,
        autoplay: {
          delay: 10000
        },
        navigation: {
          nextEl: '.swiper-button-next'
        }
      },
      sampleData: [], // 领样地址
      dialogSample: false // 领养弹出层
    }
  },
  components: {
    imgZoom,
    vCounter,
    swiper,
    swiperSlide,
    vTools
  },
  beforeMount () {
    this.getProductInfo()
    this.getRecommend()
  },
  methods: {
    // 获取商品信息
    getProductInfo () {
      return new Promise(resolve => {
        this.$http.post(this.$api + '/pc/product/productDetail', {
          productId: this.productId
        }).then(res => {
          if (res.responseCode === '0000') {
            if (res.data.banners.length) {
              this.productImgList = res.data.banners
              this.setCurrentImg(0)
            }
            if (res.data.isLadder === 1) { // 非阶梯价
              res.data.prices.forEach(item => { // 为每个规格添加计数器
                this.$set(item, 'amount', 0)
              })
            } else { // 阶梯价
              let obj = {}
              let pArray = []
              res.data.prices.forEach(item => {
                let pobj = {
                  upper: item.amountUpper,
                  price: item.sellPrice,
                  priceId: item.priceId
                }
                pArray.push(pobj)
                obj.attributeId = item.attributeId
                obj.attributeName = item.attributeName
                obj.amountLower = res.data.prices[0].amountLower
                obj.prices = pArray
                obj.priceId = ''
                obj.amount = 0
              })
              this.ladderPrice = obj
            }
            this.product = res.data
            // 设置发货地址
            let area = []
            if (res.data.customerStore.province) {
              area.push(res.data.customerStore.province)
              if (res.data.customerStore.city) {
                area.push(res.data.customerStore.city)
              }
            }
            // 设置产地
            let pArea = []
            if (res.data.productMultiAttributes.producingArea) {
              pArea = res.data.productMultiAttributes.producingArea.split(',')
              res.data.productMultiAttributes.producingAreaName = getAreaName(pArea)
            }
            this.product.sendArea = getAreaName(area)
            this.detailsImg = this.product.details.split(',') // 设置详情图
          }
        }).catch(err => {
          console.error(err)
        })
        return resolve()
      })
    },
    // 设置当前预览的图片
    setCurrentImg (index) {
      this.activeIndex = index
      this.productImg = this.productImgList[this.activeIndex].imgUrl
    },
    // 处理商品数量变化
    amountChange (obj) {
      if (this.product.isLadder === 1) { // 非阶梯价
        this.product.prices.forEach(item => {
          if (item.attributeId === obj.attributeId) {
            item.amount = obj.amount
          }
        })
      } else { // 阶梯价
        const lPLen = this.ladderPrice.prices.length
        for (let i = 0; i < lPLen; i++) {
          const item = this.ladderPrice.prices[i]
          if (this.ladderPrice.amount <= item.upper) {
            this.ladderPrice.priceId = item.priceId
            break
          } else {
            this.ladderPrice.priceId = this.ladderPrice.prices[lPLen - 1].priceId
          }
        }
      }
      this.countPrice()
    },
    // 计算商品总价
    countPrice () {
      this.totalPrice = 0
      if (this.product.isLadder === 1) { // 非阶梯价
        this.product.prices.forEach(item => {
          this.totalPrice += item.sellPrice * item.amount
        })
      } else { // 阶梯价
        let cprice = this.ladderPrice.prices[this.ladderPrice.prices.length - 1].price
        // eslint-disable-next-line
        let index = 0
        for (let i = 0; i < this.ladderPrice.prices.length; i++) {
          const item = this.ladderPrice.prices[i]
          if (this.ladderPrice.amount <= item.upper) {
            index = i
            cprice = item.price
            this.ladderPrice.priceId = item.priceId
            break
          }
        }
        this.totalPrice = cprice * this.ladderPrice.amount
      }
      this.totalPrice = this.totalPrice.toFixed(2)
    },
    // 收藏商品
    likeProduct () {
      if (!this.isLoading) {
        if (this.$store.state.user.PCToken) {
          this.isLoading = true
          this.$http.post(this.$api + '/pc/product/addOrDeleteProduct', {
            productId: this.product.productId
          }).then(res => {
            if (res.responseCode === '0000') {
              this.$message({
                type: 'success',
                message: res.responseMsg,
                duration: this.$store.state.duration,
                onClose: () => {
                  this.getProductInfo().then(() => {
                    this.isLoading = false
                  })
                }
              })
            }
          }).catch(err => {
            console.error(err)
            this.isLoading = false
          })
        } else {
          this.$message({
            type: 'error',
            message: '请登录账户后再加入收藏！',
            duration: this.$store.state.duration,
            onClose: () => {
              this.$router.push('/login')
            }
          })
        }
      } else {
        return false
      }
    },
    // 加入购物车
    addCart () {
      if (!this.isLoading) { // 判断是否有请求正在加载中
        if (this.$store.state.user.PCToken) { // 判断是否已登录
          if (Number(this.$store.state.user.status) === 4) { // 判断是否已通过审核（完善资料）
            let prama = {
              storeId: this.product.customerStore.storeId,
              productId: this.productId,
              attributes: []
            }
            let count = 0
            if (this.product.isLadder === 1) { // 非阶梯价
              this.product.prices.forEach(item => {
                count += item.amount
                let obj = {
                  attributeId: item.attributeId,
                  amount: item.amount,
                  priceId: item.priceId
                }
                if (obj.amount) {
                  prama.attributes.push(obj)
                }
              })
            } else { // 阶梯价
              count += Number(this.ladderPrice.amount)
              let obj = {
                attributeId: this.ladderPrice.attributeId,
                amount: this.ladderPrice.amount,
                priceId: this.ladderPrice.priceId
              }
              if (obj.amount) {
                prama.attributes.push(obj)
              }
            }
            if (count > 0) {
              this.isLoading = true
              this.$http.post(this.$api + '/pc/orderShoppingCart/addShoppingCart', prama).then(res => {
                if (res.responseCode === '0000') {
                  this.$message({
                    type: 'success',
                    message: res.responseMsg,
                    duration: this.$store.state.duration,
                    onClose: () => {
                      this.$store.dispatch('shopcart/getShopcart')
                      this.getProductInfo().then(() => {
                        this.isLoading = false
                      })
                    }
                  })
                } else {
                  this.$message.error({
                    duration: this.$store.state.duration,
                    message: res.responseMsg
                  })
                  this.isLoading = false
                }
              }).catch(err => {
                console.error(err)
                this.isLoading = false
              })
            } else {
              this.$message.error('购买数量不能为0')
            }
          } else {
            let status = Number(this.$store.state.user.status)
            let msg = ''
            switch (status) {
              case 1:
                msg = '您还没有完善资料信息，请提交资料信息'
                break
              case 2:
                msg = '您的资料信息正在审核中...'
                break
              case 3:
                msg = '您的资料信息正在复核中...'
                break
              case 5:
                msg = '您的资料信息审核不通过，请修改后重新提交'
                break
            }
            this.$message.error({
              message: msg,
              duration: this.$store.state.duration
            })
          }
        } else {
          this.$message({
            type: 'error',
            message: '请登录账户后再加入购物车！',
            duration: this.$store.state.duration,
            onClose: () => {
              this.$router.push('/login')
            }
          })
        }
      } else {
        return false
      }
    },
    // 立即购买
    buyNow () {
      if (!this.isLoading) { // 判断是否有请求正在加载中
        if (this.$store.state.user.PCToken) { // 判断是否已登录
          if (Number(this.$store.state.user.status) === 4) { // 判断是否已通过审核（完善资料）
            // 组合价格规格参数
            let attrs = []
            if (this.product.isLadder === 1) { // 非阶梯价
              this.product.prices.forEach(item => {
                if (item.amount) {
                  let obj = {
                    amount: item.amount,
                    attributeId: item.attributeId,
                    priceId: item.priceId
                  }
                  attrs.push(obj)
                }
              })
            } else { // 阶梯价
              let obj = {
                amount: this.ladderPrice.amount,
                attributeId: this.ladderPrice.attributeId,
                priceId: this.ladderPrice.priceId
              }
              attrs.push(obj)
            }
            // 判断购买数量是否大于0
            if (attrs.every(item => item.amount === 0)) {
              this.$message.error({
                duration: this.$store.state.duration,
                message: '购买数量不能为0！'
              })
              return false
            }
            // 组合店铺参数
            let shops = [{
              products: [{
                productId: this.productId,
                attributes: attrs
              }],
              storeId: this.product.customerStore.storeId
            }]
            // 组合总参数
            let param = {
              balanceType: '0', // 0:立即购买，1:购物车结算
              shops: JSON.stringify(shops)
            }
            // 发送请求
            this.$http.post(this.$api + '/pc/order/balanceOrder', param).then(res => {
              if (res.responseCode === '0000') {
                // 把结算单信息存入localstroage
                window.localStorage.setItem('orderInfo', JSON.stringify(res.data))
                this.$router.push({
                  path: '/order/confirmOrder',
                  query: {
                    submitType: 0,
                    isOldTea: this.product.isOldTea
                  }
                })
              } else {
                this.$message({
                  type: 'error',
                  message: res.responseMsg,
                  duration: this.$store.state.duration
                })
              }
            })
          } else {
            let status = Number(this.$store.state.user.status)
            let msg = ''
            switch (status) {
              case 1:
                msg = '您还没有完善资料信息，请提交资料信息'
                break
              case 2:
                msg = '您的资料信息正在审核中...'
                break
              case 3:
                msg = '您的资料信息正在复核中...'
                break
              case 5:
                msg = '您的资料信息审核不通过，请修改后重新提交'
                break
            }
            this.$message.error({
              message: msg,
              duration: this.$store.state.duration
            })
          }
        } else {
          this.$message({
            type: 'error',
            message: '请登录账户后再加入购物车！',
            duration: this.$store.state.duration,
            onClose: () => {
              this.$router.push('/login')
            }
          })
        }
      } else {
        return false
      }
    },
    // 获取领取样品地址
    getSample () {
      if (!this.product.linkedSample.isGet) {
        // 判断是否免费
        if (this.product.linkedSample.isFree) {
          this.$http.post(this.$api + '/pc/orderShipping/findDefaultByCust', {}).then(res => {
            if (res.responseCode === '0000') {
              if (res.data) {
                this.dialogSample = true
                this.sampleData = res.data
                let area = []
                if (res.data.province) {
                  area.push(res.data.province)
                  if (res.data.city) {
                    area.push(res.data.city)
                    if (res.data.district) {
                      area.push(res.data.district)
                    }
                  }
                }
                this.sampleData.sendArea = getAreaName(area)
              } else {
                this.$message({
                  type: 'error',
                  message: '请先填写默认地址...',
                  duration: this.$store.state.duration,
                  onClose: () => {
                    this.$router.push('/user/address')
                  }
                })
              }
            }
          })
        } else {
          this.$message({
            type: 'success',
            message: '请前往购买该样品...',
            duration: this.$store.state.duration
          })
          this.$router.push('/goods/goodsDetail?productId=' + this.product.linkedSample.linkedProductId)
        }
      } else {
        return false
      }
    },
    // 领取样品
    sureSample () {
      if (this.product.linkedSample.isFree) {
        let param = {
          productId: this.productId,
          consignee: this.sampleData.name,
          shippingAddress: this.sampleData.sendArea + this.sampleData.address,
          phone: this.sampleData.mobile
        }
        this.$http.post(this.$api + '/pc/product/getSample', param).then(res => {
          if (res.responseCode === '0000') {
            this.$message({
              type: 'success',
              message: res.responseMsg,
              duration: this.$store.state.duration
            })
            this.dialogSample = false
          } else {
            this.$message({
              type: 'error',
              message: res.responseMsg,
              duration: this.$store.state.duration
            })
          }
        })
      }
    },
    // 为你推荐
    getRecommend () {
      this.$http.post(this.$api + '/pc/home/recommend', {
        page: 1,
        pageSize: 20
      }).then(res => {
        if (res.responseCode === '0000') {
          res.data.forEach(item => {
            let arr = []
            if (item.keywords) {
              arr = item.keywords.split(',')
              item.k1 = arr[0]
              item.k2 = arr[1]
              item.k3 = arr[2]
            }
          })
          this.selectionGoods = res.data
        }
      }).catch(err => {
        console.error(err)
      })
    }
  },
  watch: {
    '$route.query.productId': function (val) {
      if (val) {
        this.productId = val
        this.getProductInfo()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/basic.scss';
.page {
  width: 100%;
  background: #fff;
  .w {
    margin: 0 auto;
    padding-bottom: 50px;
    width: 1200px;
  }
}
  .product-intro {
    margin-top: 25px;
    .preview-wrapper {
      float: left;
      margin-right: 30px;
      .preview-img {
        width: 450px;
        height: 450px;
        border: solid 1px $border_color;
      }
      .img-list {
        margin-top: 20px;
        .img-item {
          display: block;
          border: solid 1px $border_color;
          &.active {
            border: solid 2px $green;
          }
        }
      }
    }
    .item-info-wrapper {
      float: left;
      width: 720px;
      .product-name {
        margin-bottom: 15px;
        line-height: 28px;
        font-size: $fz_20;
        color: $f_main;
        .pro-grade-name {
          vertical-align: top;
          margin-right: 12px;
        }
      }
      .price-wrapper {
        padding: 20px;
        background: $bg_color;
        .sell-price,
        .original-price,
        .since-pijia {
          height: 24px;
          line-height: 24px;
        }
        .cny {
          padding-right: 4px;
          font-size: $fz_12;
        }
        .price-tit {
          float: left;
          width: 80px;
          .sell-price,
          .original-price,
          .since-pijia {
            font-size: $fz_14;
            color: $f_sub;
          }
          .sell-price,
          .original-price {
            margin-bottom: 5px;
          }
        }
        .price-box {
          float: left;
          width: 200px;
          .sell-price {
            margin-bottom: 5px;
            color: $red;
            font-size: $fz_20;
          }
          .original-price {
            margin-bottom: 5px;
            color: $f_normal;
            font-size: $fz_14;
          }
          .since-pijia {
            color: $f_normal;
            font-size: 0;
            span {
              font-size: $fz_14;
              color: $f_main;
            }
            .discount {
              display: inline-block;
              margin-left: 6px;
              padding: 0 8px 0 15px;
              height: 22px;
              font-size: $fz_14;
              color: #ffffff;
              background: url(../../assets/images/acount_bg.png) left center no-repeat;
            }
          }
        }
      }
      .activity {
        margin-top: 20px;
        line-height: 24px;
        .tit {
          float: left;
          font-size: $fz_18;
        }
        .active-list {
          float: left;
          .active-item {
            margin-left: 20px;
            height: 24px;
            color: $f_main;
            text-decoration: none;
            .tag {
              display: inline-block;
              padding: 0 4px;
              height: 24px;
              color: $red;
              border: solid 1px $red;
              border-radius: 4px;
              cursor: pointer;
            }
            .txt {
              margin-left: 10px;
            }
          }
        }
      }
      .freight {
        margin-top: 15px;
        line-height: 24px;
        span {
          float: left;
          padding: 0 6px;
        }
        .tit {
          padding: 0;
          float: left;
          font-size: $fz_18;
        }
        .origin-place {
          padding-left: 20px;
          padding-right: 6px;;
        }
        .desc {
          padding: 0;
          font-size: $fz_16;
          color: $f_normal;
        }
      }
      .package {
        margin-top: 10px;
        padding-top: 15px;
        border-top: solid 1px $border_color;
        .tit {
          float: left;
          font-size: $fz_18;
        }
        .desc {
          padding-left: 20px;
          padding-right: 6px;
        }
      }
      .specification-wrapper {
        margin-top: 15px;
        padding: 20px 0;
        border: solid 1px $border_color;
        border-left: 0;
        border-right: 0;
        .tit {
          float: left;
          margin-right: 20px;
          width: 36px;
          line-height: 26px;
          font-size: $fz_18;
        }
        .specification-box {
          float: left;
          width: 664px;
          .spec-item {
            display: flex;
            margin-bottom: 6px;
            height: 26px;
            font-size: $fz_16;
            justify-content: space-between;
            align-items: center;
            &:last-child {
              margin-bottom: 0;
            }
            .stock {
              vertical-align: middle;
              color: $f_normal;
            }
            .counter-wrapper {
              display: inline-block;
              vertical-align: middle;
            }
          }
        }
      }

      .total-wrapper {
        margin-top: 15px;
        padding-right: 20px;
        height: 45px;
        font-size: $fz_14;
        color: $f_main;
        line-height: 45px;
        text-align: right;
        background: $bg_color;
        .total-price {
          padding: 0 10px;
          font-size: $fz_20;
          color: $red;
        }
      }
      .tools-wrapper {
        margin-top: 15px;
        font-size: 0;
        text-align: right;
        button {
          display: inline-block;
          margin-right: 10px;
          width: 155px;
          height: 50px;
          font-size: $fz_20;
          color: #fff;
          line-height: 50px;
          text-align: center;
          cursor: pointer;
          border: 0;
          outline: 0;
          &.btn-buy {
            background: $red;
            &:hover {
              background: $red_l;
            }
            &:active {
              background: $red_d;
            }
          }
          &.btn-add2cart {
            background: $green;
            &:hover {
              background: $green_l;
            }
            &:active {
              background: $green_d;
            }
          }
        }
        .favorite {
          display: inline-block;
          vertical-align: top;
          margin-top: 13px;
          margin-left: 12px;
          font-size: $fz_16;
          span {
            display: inline-block;
            vertical-align: top;
            height: 24px;
            line-height: 24px;
          }
          .icon {
            display: inline-block;
            margin-right: 8px;
            width: 24px;
            height: 24px;
            background: url(../../assets/images/heart-off.png) center no-repeat;
            cursor: pointer;
            &.active {
              background: url(../../assets/images/heart-on.png) center no-repeat;
            }
          }
        }
      }
      .service-wrapper {
        margin-top: 20px;
        text-align: right;
        font-size: 0;
        .tit {
          display: inline-block;
          vertical-align: middle;
          font-size: $fz_16;
          line-height: 24px;;
          color: $f_main;
        }
        .seven,
        .zheng {
          display: inline-block;
          vertical-align: middle;
          margin-left: 20px;
          padding-left: 30px;
          font-size: $fz_16;
          line-height: 24px;;
          color: $f_main;
          background-position: 0 center;
          background-repeat: no-repeat;
        }
        .seven {
          background-image: url(../../assets/images/week.png);
        }
        .zheng {
          background-image: url(../../assets/images/zheng.png);
        }
      }
    }
  }
  .sample-wrapper {
    margin: 25px 0 0;
    padding: 10px 15px;
    background: $bg_color;
    border: dashed 1px $border_color;
    .sample-box {
      height: 24px;
      line-height: 24px;
      .icon {
        float: left;
        margin-top: 3px;
        height: 18px;
      }
      .text {
        display: inline-block;
        margin-left: 20px;
        font-size: $fz_14;
        color: $f_sub;
      }
      .btn-get {
        float: right;
        padding: 0 10px;
        height: 24px;
        line-height: 24px;
        font-size: $fz_14;
        color: #ffffff;
        background: $green;
        border-radius: 4px;
        border: 0;
        outline: 0;
        cursor: pointer;
        &:hover {
          background: $green_l;
        }
        &:active {
          background: $green_d;
        }
        &.disabled {
          background: $f_sub;
          cursor: no-drop;
        }
      }
    }
  }
  .store-wrapper {
    float: left;
    margin: 25px 40px 65px 0;
    width: 280px;
    border: solid 1px $border_color;
    .store-box {
      padding: 15px;
      border-bottom: solid 1px $border_color;
      .logo {
        display: block;
        margin: 0 auto 15px;
        width: 120px;
        height: 120px;
        border: solid 1px $border_color;
      }
      .name {
        font-size: $fz_14;
        color: $f_main;
        text-align: center;
        margin-bottom: 10px;
      }
      .btn-link {
        display: block;
        margin: 0 auto;
        width: 120px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        font-size: $fz_14;
        text-decoration: none;
        color: #ffffff;
        background: $green;
        border: 0;
        outline: 0;
        cursor: pointer;
        &:hover {
          background: $green_l;
        }
        &:active {
          background: $green_d;
        }
      }
    }
    .store-selection {
      position: relative;
      width: 230px;
      margin: 0 auto;
      .title {
        margin-top: 20px;
        height: 17px;
        background: url(../../assets/images/selection-tit.png) center no-repeat;
      }
      .selection {
        height: 1939px;
        overflow: hidden;
        .selection-item {
          display: block;
          padding: 20px 0;
          height: 388px;
          border-bottom: solid 1px $border_color;
          overflow: hidden;
          &:hover {
            .img-wrapper {
              border: solid 1px $green_l;
              box-shadow: 0 2px 8px rgba($color: $green_l, $alpha: 0.2);
            }
          }
          .img-wrapper {
            width: 230px;
            height: 230px;
            border: solid 1px transparent;
            overflow: hidden;
            .img {
              width: 100%;
              height: 100%;
            }
          }
          .price-wrapper {
            margin-top: 4px;
            font-size: 0;
            .discount {
              display: inline-block;
              vertical-align: middle;
              padding: 0 13px 0 5px;
              height: 23px;
              line-height: 23px;
              font-size: $fz_16;
              color: #ffffff;
              background: right center url('../../assets/images/discount-bg.png') no-repeat;
            }
            .price {
              margin-left: 6px;
              vertical-align: middle;
              display: inline-block;
              font-size: $fz_16;
              color: $red;
              em {
                vertical-align: text-bottom;
                font-size: $fz_12;
                font-style: normal;
              }
              .yuan {
                vertical-align: text-bottom;
                font-size: $fz_12;
                font-style: normal;
                color: $red;
              }
            }
            .original-price {
              display: inline-block;
              vertical-align: middle;
              margin-left: 8px;
              font-size: $fz_14;
              color: $f_sub;
              .yuan {
                vertical-align: text-bottom;
                font-size: $fz_14;
                font-style: normal;
                color: $f_sub;
              }
            }
          }
          .name {
            margin-top: 5px;
            height: 36px;
            font-size: 14px;
            line-height: 18px;
            color: $f_main;
            overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
          }
          .discounts {
            padding-top: 5px;
            .tag-group {
              padding-top: 5px;
              font-size: 0;
              .tag {
                display: inline-block;
                margin-right: 5px;
                font-size: $fz_14;
                color: $red;
                padding: 4px;
                border: solid 1px $red;
                border-radius: 4px;
                &:last-child {
                  margin-right: 0;
                }
              }
            }
          }
          .pro-grade-name {
            margin-top: 5px;
          }
          .keywords {
            position: absolute;
            top: 20px;
            left: 0;
            width: 100%;
            height: 230px;
            text-align: center;
            .w1 {
              position: absolute;
              top: 0;
              left: 15px;
              padding: 8px 10px;
              width: 52px;
              height: 61px;
              background: url(../../assets/images/w1.png);
              font-size: 16px;
              color: #ffffff;
            }
            .w2 {
              position: absolute;
              right: 0;
              bottom: 0;
              width: 94px;
              height: 74px;
              background: url(../../assets/images/w2.png);
              overflow: hidden;
              .text {
                width: 150px;
                display: block;
                padding: 4px 0;
                text-align: center;
                color: #fff;
                font-style: normal;
                transform: translate(-13px, 35px) rotate(-39deg);
                border: solid 1px #ffffff;
              }
            }
            .w3 {
              position: absolute;
              top: 10px;
              right: 10px;
              padding: 13px;
              width: 60px;
              height: 60px;
              font-size: 16px;
              color: #ffffff;
              background: #ff3b30;
              border-radius: 50%;
            }
          }
        }
      }
      .next-btn {
        top: auto;
        bottom: -40px;
        left: -25px;
        width: 280px;
        height: 40px;
        text-align: center;
        border: solid 1px $border_color;
        background: $bg_color;
        .icon {
          display: inline-block;
          margin-top: 12px;
          width: 55px;
          height: 15px;
          background: url(../../assets/images/arrow-down.png) no-repeat;
        }
        &:hover {
          background: $bg_light;
        }
      }
    }
  }
  .product-details {
    float: left;
    margin-top: 25px;
    width: 750px;
    .details-info {
      border: solid 1px $border_color;
      .tit {
        padding-left: 24px;
        height: 39px;
        line-height: 39px;
        font-size: $fz_16;
        color: $f_main;
        background: $bg_color;
        border-bottom: solid 1px $border_color;
      }
      .info-list {
        padding: 10px 24px;
        .col {
          padding-top: 10px;
          padding-bottom: 10px;
          font-size: $fz_14;
          color: $f_normal;
        }
      }
    }
    .details-imgs {
      margin: 20px 0;
      .images {
        display: block;
        width: 100%;
      }
    }
  }
  .el-dialog__header .el-dialog__title{
    font-weight: bold;
  }
  .sample-content{
    font-size: $fz_14;
    p{
      margin-bottom: 16px;
      padding-left: 10px;
      span {
        display: inline-block;
        width: 75px;
      }
    }
  }
  .dialog-footer .el-button--primary{
    width: 250px;
    margin-left: 85px;
    height: 35px;
  }
  .el-dialog .el-dialog__header {
    font-weight: bold;
  }
</style>
